import React from 'react';
import { TabBar } from 'antd-mobile';
import { useNavigate, useLocation } from "react-router-dom";
import {
  AppOutline,
  ContentOutline,
  UserOutline,
  UnorderedListOutline
} from 'antd-mobile-icons'
import '../styles/components/tabBarFooter.scss'

interface TabBarFooterProps {
  activeKey?: string;  // 当前活跃的标签，不传则自动根据路径判断
  fixed?: boolean;  // 是否固定在底部
}

// 标签页配置
const tabs = [
  {
    key: 'home',
    title: '首页',
    icon: <AppOutline />,
    path: '/home',
  },
  {
    key: 'medical',
    title: '医疗',
    icon: <UnorderedListOutline />,
    path: '/hospital-list',
  },
  {
    key: 'appointments',
    title: '预约',
    icon: <ContentOutline />,
    path: '/my-appointments'
  },
  {
    key: 'profile',
    title: '我的',
    icon: <UserOutline />,
    path: '/profile'
  }
]

const TabBarFooter: React.FC<TabBarFooterProps> = ({ activeKey, fixed = true }) => {
  const navigate = useNavigate();
  const location = useLocation();

  // 自动判断当前路径对应的activeKey
  const getCurrentActiveKey = (): string => {
    const pathname = location.pathname;
    const matchedTab = tabs.find(tab => pathname === tab.path || pathname.startsWith(tab.path))
    return matchedTab?.key || 'home'
  }

   // 最终使用的activeKey
   const finalActiveKey = activeKey || getCurrentActiveKey()

   // 处理标签切换
   const handleChange = (key: string) => {
    const targetTab = tabs.find(tab => tab.key === key)
    if (targetTab) {
      navigate(targetTab.path)
    }
   }

  return (
    <>
      {/* 添加额外的背景遮罩层，确保覆盖内容区域 */}
      <div className="tabbar-background-mask"></div>

      <div className={`tab-bar-footer ${fixed ? 'fixed' : ''}`}>
        <TabBar activeKey={finalActiveKey} onChange={handleChange}>
          {tabs.map(tab => (
            <TabBar.Item
              key={tab.key}
              title={tab.title}
              icon={tab.icon}
            />
          ))}
        </TabBar>
      </div>
    </>
  )
}

export default TabBarFooter;